<template>
  <d2-container>
    <el-form inline
             style="width: 100%; text-align: left"
             label-width="80px"
             class="flex-end"
             ref="form"
             @submit.native.prevent="onSubmit"
             @reset.native.prevent="onReset"
             size="small">
        <el-form-item>
          <el-input v-model="query.keywords"
                    style="width: 230px"
                    placeholder="昵称 | 手机号 | 用户ID | 上级ID"
                    clearable></el-input>
        </el-form-item>
        <el-form-item label="筛选用户注册时间" label-width="130px">
          <el-date-picker
            v-model="query.start_time"
            type="date"
            size="small"
            style="width: 180px"
            format="yyyy-MM-dd"
            :picker-options="startTimePickerOption"
            value-format="timestamp"
            placeholder="选择开始日期">
          </el-date-picker>
          -
          <el-date-picker
            v-model="query.end_time"
            type="date"
            size="small"
            style="width: 180px"
            format="yyyy-MM-dd"
            :picker-options="endTimePickerOption"
            value-format="timestamp"
            placeholder="选择结束日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary"
                     native-type="submit">检索</el-button>
          <!--        <el-button native-type="reset">重置</el-button>-->
        </el-form-item>
    </el-form>
    <el-table :data="list"
              border
              :resizable="false"
              stripe>
      <el-table-column prop="id"
                       label="用户ID">
        <template slot-scope="scope">
          <a>{{ scope.row.id }}</a>
        </template>
      </el-table-column>
      <el-table-column label="上级ID"
                       prop="pid"></el-table-column>
      <el-table-column label="昵称"
                       prop="name"></el-table-column>
      <el-table-column label="手机号"
                       width="120"
                       prop="phone"></el-table-column>
      <el-table-column label="注册时间"
                       width="150"
                       prop="time_create">
        <template slot-scope="{ row }">
          {{row.time_create | timeFilter}}
        </template>
      </el-table-column>
      <el-table-column label="发布任务"
                       prop="publish_task"></el-table-column>
      <el-table-column label="完成任务"
                       prop="finish_task"></el-table-column>
      <el-table-column label="下级数量"
                       prop="son_num"></el-table-column>
      <el-table-column label="下下级数量"
                       width="120"
                       prop="grandson_num"></el-table-column>
      <el-table-column label="有效下级数量"
                       width="130"
                       prop="usable_son_num"></el-table-column>
      <el-table-column label="推广收入"
                       prop="commission"></el-table-column>
      <el-table-column label="余额"
                       prop="balance">
        <template slot-scope="{ row }">
          {{row.balance | moneyFilter}}
        </template>
      </el-table-column>
      <el-table-column label="总收入"
                       prop="total_income">
        <template slot-scope="{ row }">
          {{row.total_income | moneyFilter}}
        </template>
      </el-table-column>
      <el-table-column label="总支出"
                       prop="total_outcome">
        <template slot-scope="{ row }">
          {{row.total_outcome | moneyFilter}}
        </template>
      </el-table-column>
      <el-table-column label="总提现"
                       prop="total_withdraw">
        <template slot-scope="{ row }">
          {{row.total_withdraw | moneyFilter}}
        </template>
      </el-table-column>
      <el-table-column fixed="right"
                       label="操作"
                       width="145">
        <template slot-scope="{row}">
          <div class="operation_body">
            <el-button type="text"
                       size="small" @click="commission(row)">提成比例</el-button>
            <el-button type="text"
                       size="small" @click="balanceChange(row)">余额变更</el-button>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination layout="total, prev, pager, next"
                   background
                   @current-change="fetch"
                   :current-page.sync="currentPage"
                   :page-size="limit"
                   style="display: flex;justify-content: center;"
                   :total="total">
    </el-pagination>
    <commission-percentage ref="commissionPercentage"></commission-percentage>
    <balance-change ref="balanceChange"></balance-change>
  </d2-container>
</template>

<script>
import { mapActions, mapGetters } from 'vuex'
import commonCurd from '@/mixin/common-curd'
import commissionPercentage from './components/commission-percentage'
import balanceChange from './components/balance-change'

export default {
  name: 'users',
  data () {
    const _this = this
    return {
      query: {
        keywords: undefined,
        start_time: '',
        end_time: ''
      },
      startTimePickerOption: {
        disabledDate (date) {
          if (!_this.query.end_time > 0) {
            return false
          }
          const timestamp = (new Date(date)).getTime()
          return _this.query.end_time < timestamp
        }
      },
      endTimePickerOption: {
        disabledDate (date) {
          if (!_this.query.start_time > 0) {
            return false
          }
          const timestamp = (new Date(date)).getTime()
          return _this.query.start_time > timestamp
        }
      }
    }
  },
  mixins: [commonCurd],
  async asyncData ({ store, route }) {
    return store.dispatch('user/fetchList', { page: 1, limit: 12 })
  },
  components: {
    commissionPercentage, balanceChange
  },
  computed: {
    ...mapGetters('user', ['list', 'total'])
  },
  methods: {
    ...mapActions('user', ['fetchList']),
    onSubmit () {
      this.fetch(1)
    },
    onReset () {
      this.$refs.form.resetFields()
      this.query = this.$options.data
      this.fetch(1)
    },
    async commission (row) {
      await this.$refs.commissionPercentage.open(row)
      this.fetch()
    },
    async balanceChange (row) {
      await this.$refs.balanceChange.open(row)
      this.fetch()
    }
  }
}
</script>
